<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   
</head>
<body>
    <div id="app">
        <!-- 基本渲染 -->
        {{msg}}
        <button>{{msg}}123</button>
        <!-- 属性渲染 -->
        <div :title="msg" id="one">查看title</div>
        <!-- 条件渲染 指令-->
        <div v-if="isRain">宿舍</div>
        <div v-else>万达</div>
        <!-- 列表渲染 -->
        <!-- item,index仅能在for里使用，出了for就无效了 -->
        <!-- 哪一个想循环生成，就在哪个上使用v-for -->
        <div v-for="(item,index) in fruits" :key="index">{{item}}</div>
    </div>

    <script>
        // let obj = {}
        // let obj2 = new Object();
        new Vue({
            // 与vue实例绑定的节点
            el:'#app',
            // 数据模型
            data:{
                msg:'hello',
                a:1,
                // ture显示宿舍，false显示万达
                isRain:true,
                fruits:['苹果','香蕉','梨']


            }

        })

    </script>
</body>
</html>